<template>
  <el-container>
    <!-- 顶部导航栏 -->
    <el-header><f-header @toSearch="toSearch"></f-header></el-header>

    <!-- 中间区域 -->
    <el-container class="mid">
      <!--侧边栏 -->
      <el-aside>
        <el-menu @select="selectMenu">
          <!-- 含二级节点 -->

          <!-- <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''"  :key="item">

              <template slot="title">
                  <span>{{item.name}}</span>
              </template>

              <el-menu-item   v-for="(item2,index2) in item.children" :index="item2.path" :key="item2" :class="$router.path==item2.path?'is-active':''">
              <span slot="title">{{index2}}-{{item2.name}}</span>
            </el-menu-item>

            </el-submenu> -->

          <!-- 不含二级节点 -->

          <!-- 根据后台数据的板块名称动态生成侧边栏 -->
          <template>
            <div>
              <el-menu-item
                v-for="(item, index) in plateList"
                :index="index"
                :key="index"
              >
                <!-- <span >{{ index }}</span> -->
                <span slot="title">{{ item.sectionName }}</span>
              </el-menu-item>
            </div>
          </template>
        </el-menu>
      </el-aside>

      <!-- 主要内容区域 -->
      <el-main>
        <el-col :span="14">
          <div class="main-left">
            <div class="lunbo">
              <carousel></carousel>
            </div>
            <div class="router">
              <list :categoryId="categoryId" :title="title"></list>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="main-right">
            <member></member>
            <tabs></tabs>
            <recommend></recommend>
            <friend-link></friend-link>
          </div>
        </el-col>
      </el-main>
    </el-container>

    <!-- 底部区域 -->
    <el-footer><f-footer></f-footer></el-footer>

    <!-- 返回顶部 -->
    <el-backtop bottom="350"></el-backtop>
  </el-container>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      curr: 1,
      plateList: [],
      categoryId: 0,
      title: "",
    };
  },
  created() {
    this.plate(this.curr);
  },
  methods: {
    plate() {
      var _this = this;
      _this.$axios.post("/forum/category/list?curr=" + 1).then((res) => {
        console.log(res);
        _this.plateList = res.data.data.records;
        console.log(_this.plateList);
      });
    },
    selectMenu(index) {
      this.categoryId = this.plateList[index].id;
    },
    toSearch(title) {
      this.title = title;
      console.log("home:" + this.title);
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}

.el-header {
  background-color: #199ed8;
  color: #333;
  text-align: center;
  height: 60px;
  overflow: hidden;
}

.el-footer {
  background-color: #199ed8;
  color: #333;
  text-align: center;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-container .mid {
  height: auto;
  background-color: #eeeeee;
}

.el-aside {
  width: 200px !important;
}

.el-aside .el-menu {
  width: 110px;
  margin: 30px;
  display: flex;
  position: fixed;
}

.el-menu-item:first-of-type {
  color: red;
}

.el-main {
  color: #333;
}

.main-left {
  height: auto;
}

.main-right {
  height: auto;
}
</style>
